<template>
    <div class="page-container">
        <div class="main-layout">
            <el-container class="full-height main-full">
                <!-- 聊天面板容器 -->
                <el-main class="ov-hidden full-height no-padding panel-main">
                    <!-- <el-empty v-if="index_name == null" description="暂无数据" /> -->
                    <TalkPanel
                        class="full-height"
                        :params="params"
                        :is-online="isFriendOnline"
                    />
                </el-main>
            </el-container>
        </div>
    </div>
</template>
<script>
import TalkPanel from '/@/views/chat/components/TalkPanel.vue'
import { reactive, toRefs, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { findTalkIndex } from '/@/views/chat/utils/talk.js'
import { useDialogueInfo } from '/@/stores/chat/dialogue'
export default {
    name: 'MessageCustomer',
    components: {
        TalkPanel
    },
    setup() {
        const route = useRoute()
        const router = useRouter()
        const dialogueInfo = useDialogueInfo()
        const source = route.path == '/customer/chat' ? '2' : '3'; // 聊天来源
        const storeId = route.query.id
        const state = reactive({
            params: {
                talk_source: source, // 2 商城客服； 3 付费客服
                customer: '1',
                storeId: route.query.id, // 店铺id
            }
        })
        const index_name = computed(() => {
            return dialogueInfo.index_name
        })
        // 当前对话好友在线状态
        const isFriendOnline = computed(() => {
            let index = findTalkIndex(index_name.value)
            return index >= 0 && talks.value[index].is_online == 1
        })
        onMounted(() => {
            if(source == 2) {
                // 商城客服; 如果没有店铺id，则回到首页
                if(!storeId) {
                    router.replace('/')
                }
            }
        })
        return {
            ...toRefs(state),
            isFriendOnline,
            index_name
        }
    }
}
</script>
<style lang="scss" scoped>
.page-container{
    background: #262727;
    width: 100vw;
    height: 100vh;
    .main-layout {
        height: 100%;
    }
    .main-full{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1200px;
        margin: 0 auto;
    }
    .panel-main{
        background: var(--next-color-white);
        overflow: hidden;
        width: 1200px;
        height: 85vh;
        margin: 0 auto;
    }
} 
</style>